import { createVNode, render, h, onBeforeUnmount } from "vue";
import * as d3 from "d3";
export const useSvg = (isZoom?: boolean, id = "svgcanvas") => {
	const handlers = new Map(); // 创建一个映射来存储监听器函数
	const getSvg = async (svgUrl: string, elementValue: any, renderId: string, cb: Function, height?: string) => {
		if (!svgUrl) {
			const elId = document.getElementById(renderId);
			if (elId) {
				d3.select(elId).selectAll("*").remove();
				return;
			}
		}

		const res = await fetch(svgUrl);
		const text = await res.text();
		const parser = new DOMParser();
		const resXML = parser.parseFromString(text, "image/svg+xml");

		const svgDomVal = resXML.documentElement.cloneNode(true) as any;
		if (!svgDomVal) return;
		const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
		const gtags = svgDomVal.querySelectorAll(":scope > g");
		g.appendChild(gtags[0]);
		svgDomVal.appendChild(g);
		elementValue = svgDomVal;
		svgDomVal.style.width = "80%";
		svgDomVal.style.paddingTop = "0";
		svgDomVal.style.paddingLeft = "0";
		svgDomVal.style.height = height ? height : "80vh";
		// svgDomVal.style.paddingTop = '20px';
		svgDomVal.style.boxSizing = "border-box";
		// 333
		const gtag = svgDomVal.querySelectorAll(":scope > g");
		gtag[0].setAttribute("id", id);
		const Profile = {
			render() {
				return h("div", { class: "svgcontent", innerHTML: new XMLSerializer().serializeToString(svgDomVal) });
			}
		};
		const vnode = createVNode(Profile);
		const elId = document.getElementById(renderId);
		if (elId) {
			render(vnode, elId);
			// if (isZoom) {
			// 	const svg = d3.select(elId);
			// 	const svgcanvas = document.getElementById(id);
			// 	const scaleMin = 0.5;
			// 	const scaleMax = 3;
			// 	// 放大缩小
			// 	const zoom = d3
			// 		.zoom()
			// 		.on("zoom", function (event: any) {
			// 			d3.select(svgcanvas).attr("transform", event.transform);
			// 		})
			// 		.scaleExtent([scaleMin, scaleMax]);
			// 	svg && svg.call(zoom);
			// }

			const adomNodeAll = document.querySelectorAll("[device-id]");
			adomNodeAll.forEach((node: any) => {
				node.style.cursor = "pointer";
				const handler = (event: any) => cb(node, event);
				handlers.set(node, handler);
				node.addEventListener("click", handler);
			});
		}
	};
	const removeEventListeners = () => {
		handlers.forEach((handler, node) => {
			node.removeEventListener("click", handler); // 使用映射中的函数来移除事件监听器
		});
		handlers.clear(); // 清空映射
	};

	// 放大
	const handleZoomIn = (renderId: string) => {
		const elId = document.getElementById(renderId);

		const svg = d3.select(elId);
		const svgcanvas = document.getElementById(id);

		const zoom = d3.zoom().on("zoom", function (event: any) {
			d3.select(svgcanvas).attr("transform", event.transform);
		});

		svg && svg.call(zoom);

		const base = 0.2;
		const transform = d3.zoomTransform(svg.node());
		const scale = transform.k + base;

		if (scale <= 3) {
			svg.call(zoom.scaleTo, scale);
		}
	};

	// 缩小
	const handleZoomOut = (renderId: string) => {
		const elId = document.getElementById(renderId);
		const svg = d3.select(elId);
		console.log("222", elId);
		const svgcanvas = document.getElementById(id);

		const zoom = d3.zoom().on("zoom", function (event: any) {
			d3.select(svgcanvas).attr("transform", event.transform);
		});

		svg && svg.call(zoom);

		const base = 0.2;
		const transform = d3.zoomTransform(svg.node());
		const scale = transform.k - base;

		if (scale >= 0.5) {
			svg.call(zoom.scaleTo, scale);
		}
	};

	// 重置
	const handleZoomReset = (renderId: string) => {
		const elId = document.getElementById(renderId);
		const svg = d3.select(elId);
		const svgcanvas = document.getElementById(id);

		const zoom = d3.zoom().on("zoom", function (event: any) {
			d3.select(svgcanvas).attr("transform", event.transform);
		});
		svg && svg.call(zoom);

		svg.call(zoom.transform, d3.zoomIdentity.translate(0, 0).scale(1));
	};

	onBeforeUnmount(() => {
		removeEventListeners();
	});

	return {
		getSvg,
		handleZoomIn,
		handleZoomOut,
		handleZoomReset
	};
};
